<template>
  <div>
    <button @click="isShow = !isShow"> 切换：显示/隐藏</button>
    <transition 
        appear
        enter-active-class="animate__flip"
		leave-active-class="animate__rotateOut"
        >
      <h2 class="animate__animated" v-show="isShow">这是Vue第三方库的动画效果</h2>
    </transition>

  </div>

</template>

<script>
import 'animate.css';
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    }
  },
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
h2 {
  margin: 200px auto;
  
  background-color: rgb(0, 183, 255);
  width: 350px;
  height: 100%;
  transition: 1s linear;
}
</style>

